<template>
  <div class="container">
    <el-card>
      <!-- 面试技巧 -->
      <div class="top">
        <el-row>
          <el-col :span="18">
            <el-col :span="18">
              <el-form :inline="true" :model="inputForm">
                <el-form-item label="关键字">
                  <el-input
                    placeholder="根据文章标题搜索"
                    v-model="inputForm.keyword"
                  ></el-input>
                </el-form-item>
                <el-form-item label="状态">
                  <el-select v-model="inputForm.state" placeholder="请选择">
                    <el-option label="启用" :value="1"></el-option>
                    <el-option label="禁用" :value="0"></el-option>
                  </el-select>
                </el-form-item>
              </el-form>
            </el-col>
            <el-col :span="6" :pull="2">
              <el-button @click="onClean">清除</el-button>
              <el-button type="primary" @click="onSearch">搜索</el-button>
            </el-col>
          </el-col>
          <el-col :span="6" :push="3">
            <el-button
              type="success"
              icon="el-icon-edit"
              @click="showDialog = true"
              >新增技巧</el-button
            >
          </el-col>
        </el-row>
        <!-- 数据条数 -->
        <div>
          <el-alert
            :title="`数据一共${counts}条`"
            type="info"
            show-icon
            :closable="false"
          >
          </el-alert>
        </div>
        <!-- 数据条数 -->
      </div>
      <!-- 面试技巧 -->
      <!-- 表格区域 -->
      <el-table :data="articlesList">
        <el-table-column label="序号" type="index" />
        <el-table-column label="文章标题">
          <template slot-scope="{ row }">
            {{ row.title }}
            <i
              @click="video(row.videoURL)"
              v-if="row.videoURL"
              class="fa fa-film"
              aria-hidden="true"
            ></i>
          </template>
        </el-table-column>
        <el-table-column label="阅读数" prop="visits" />
        <el-table-column label="录入人" prop="username" />
        <el-table-column label="录入时间" prop="createTime" />
        <el-table-column label="状态" prop="state">
          <template slot-scope="{ row }">
            {{ row.state == 1 ? "已启用" : "已禁用" }}
          </template>
        </el-table-column>
        <el-table-column label="操作" fixed="right">
          <template slot-scope="{ row }">
            <el-button type="text" @click="onPreview(row)">预览</el-button>
            <el-button type="text" @click="onState(row)">{{
              row.state === 1 ? "禁用" : "启用"
            }}</el-button>
            <el-button
              type="text"
              :disabled="row.state === 1"
              @click="onChange(row)"
              >修改</el-button
            >
            <el-button
              type="text"
              :disabled="row.state === 1"
              @click="onDelete(row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <!-- 表格区域 -->
      <!-- 分页组件 -->
      <el-row type="flex" justify="end" align="middle" style="height: 80px">
        <el-pagination
          background
           @size-change="handleSizeChange"
          @current-change="changePage"
          :current-page="page.page"
          :page-size="page.pagesize"
          :total="page.total"
          :page-sizes="[5, 10, 20, 50]"
          layout="sizes, prev, pager, next, jumper"
        >
        </el-pagination>
      </el-row>
      <!-- 分页组件 -->
    </el-card>
    <!-- 新增文章弹框 -->
    <el-dialog title="新增文章" :visible.sync="showDialog">
      <el-form label-width="100px" :model="articlesForm" :rules="rules">
        <el-form-item label="文章标题：" prop="title">
          <el-input
            v-model="articlesForm.title"
            placeholder="请输入文章标题"
          ></el-input>
        </el-form-item>
        <el-form-item label="文章内容：" prop="articleBody">
          <!-- 富文本框 -->
          <quill-editor
            style="width: 100%"
            v-model="articlesForm.articleBody"
            ref="myQuillEditor"
            :options="editorOption"
            class="editor"
          >
          </quill-editor>
          <!-- 富文本框 -->
        </el-form-item>
        <el-form-item label="视频地址：">
          <el-input
            v-model="articlesForm.videoURL"
            placeholder="请输入视频地址"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="btnAddCancel">取消</el-button>
        <el-button type="primary" @click="btnAddOK">确定</el-button>
      </div>
    </el-dialog>
    <!-- 新增文章弹框 -->
    <!-- 预览弹框 -->
    <el-dialog title="预览文章" :visible.sync="previewDialog">
      <h4>{{ articlesInfo.title }}</h4>
      <div>
        <span>{{ articlesInfo.createTime }}</span>
        <span>{{ articlesInfo.username }}</span>
        <span class="el-icon-view"></span>
        <span>{{ articlesInfo.visits }}</span>
      </div>
      <div class="preview-content" v-html="articlesInfo.articleBody"></div>
    </el-dialog>
    <!-- 预览弹框 -->
    <!-- 修改文章弹框 -->
    <el-dialog title="修改文章" :visible.sync="changeDialog">
      <el-form label-width="100px" :model="changeForm" :rules="rules">
        <el-form-item label="文章标题：" prop="title">
          <el-input
            v-model="changeForm.title"
            placeholder="请输入文章标题"
          ></el-input>
        </el-form-item>
        <el-form-item label="文章内容：" prop="articleBody">
          <!-- 富文本框 -->
          <quill-editor
            style="width: 100%"
            v-model="changeForm.articleBody"
            ref="myQuillEditor"
            :options="editorOption"
            class="editor"
          >
          </quill-editor>
          <!-- 富文本框 -->
        </el-form-item>
        <el-form-item label="视频地址：">
          <el-input
            v-model="changeForm.videoURL"
            placeholder="请输入视频地址"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="changeCancel">取消</el-button>
        <el-button type="primary" @click="changeOK">确定</el-button>
      </div>
    </el-dialog>
    <!-- 修改文章弹框 -->
    <!-- 视频弹框 -->
    <div class="video" v-if="videoUrl">
      <div class="video-ico" @click="closeVideo">
        <span class="el-icon-close"></span>
      </div>
      <div class="video-box">
        <video autoplay :src="videoUrl"></video>
      </div>
    </div>
    <!-- 视频弹框 -->
  </div>
</template>

<script>
import { quillEditor } from 'vue-quill-editor' // 组件中挂载富文本
import 'quill/dist/quill.snow.css'
import { list, add, remove, changeState, update } from '@/api/hmmm/articles'
// 工具栏配置
const toolbarOptions = [
  ['bold', 'italic', 'underline', 'strike'],
  [{ list: 'bullet' }, { list: 'ordered' }],
  ['image', 'link']
]
export default {
  components: {
    quillEditor
  },
  data () {
    return {
      inputForm: {
        keyword: null, // 关键字
        state: null // 状态
      },
      articlesList: [], // 文章列表数据
      counts: 0, // 总数值
      showDialog: false, // 控制新增文章弹框
      changeDialog: false, // 控制修改文章弹框
      previewDialog: false, // 预览弹框
      articlesInfo: [], // 预览信息
      videoUrl: null, // 视频地址
      dialogPlay: false,
      page: {
        page: 1,
        pagesize: 10,
        total: 0 // 总数
      },
      articlesForm: {
        title: '', // 文章标题
        articleBody: '', // 文章内容
        videoURL: '' // 文章视频
      },
      rules: {
        title: [{ required: true, message: '请输入文章标题', trigger: 'blur' }],
        articleBody: [
          { required: true, message: '请输入文章内容', trigger: 'blur' }
        ]
      },
      changeForm: {
        title: '', // 文章标题
        articleBody: '', // 文章内容
        videoURL: '', // 文章视频
        id: '' // 文章id
      },
      // 富文本编辑器配置
      editorOption: {
        modules: {
          toolbar: toolbarOptions
        }
      }
    }
  },
  created () {
    this.getArticlesList()
  },
  methods: {
    // 获取文章详情
    async getArticlesList () {
      try {
        const { data } = await list({ ...this.page, ...this.inputForm })
        // console.log(data);
        data.items.forEach((item) => {
          item.createTime = this.$dayjs(item.createTime).format(
            'YYYY-MM-DD hh:mm:ss'
          )
        })
        this.articlesList = data.items
        this.counts = data.counts
        this.page.total = data.counts
      } catch (error) {}
    },
    // 点击清除按钮
    onClean () {
      this.inputForm = {
        keyword: '', // 关键字
        state: '' // 状态
      }
      this.getArticlesList()
    },
    // 点击搜索
    onSearch () {
      this.getArticlesList()
    },
    // 新增技巧确定
    async btnAddOK () {
      try {
        // this.$emit.addContent.validate();
        await add(this.articlesForm)
        this.$message.success('新增成功')
        this.btnAddCancel()
        this.getArticlesList()
      } catch (error) {
        this.$message.success('新增失败')
      }
    },
    // 新增技巧取消
    btnAddCancel () {
      this.articlesForm = {
        title: '', // 文章标题
        articleBody: '' // 文章内容
      }
      this.showDialog = false
    },
    // 点击视频图标按钮
    closeVideo () {
      this.videoUrl = null
    },
    // 点击关闭视频
    video (row) {
      this.videoUrl = row
    },
    // 点击禁用
    async onState (row) {
      try {
        await changeState({
          id: row.id,
          state: row.state === 1 ? 0 : 1
        })
        this.$message.success('操作成功')
        row.state = row.state === 1 ? 0 : 1
      } catch (error) {
        this.$message.success('操作失败')
      }
    },
    // 点击预览
    onPreview (row) {
      this.previewDialog = true
      this.articlesInfo = row
      // console.log(this.articlesInfo);
    },
    // 点击修改弹框
    async onChange (row) {
      // console.log(row);
      this.changeDialog = true
      this.changeForm.title = row.title
      this.changeForm.articleBody = row.articleBody
      this.changeForm.videoURL = row.videoURL
      this.changeForm.id = row.id
    },
    // 点击确定修改
    async changeOK () {
      try {
        await update(this.changeForm)
        this.changeDialog = false
        this.$message.success('操作成功')
        this.getArticlesList()
      } catch (error) {
        this.$message.success('操作失败')
      }
    },
    // 点击取消修改
    changeCancel () {
      this.articlesForm = {
        title: '', // 文章标题
        articleBody: '' // 文章内容
      }
      this.changeDialog = false
    },
    // 点击删除
    async onDelete (row) {
      await this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          await remove(row)
          this.$message.success('删除成功')
          this.getArticlesList()
        })
        .catch(() => {
          this.$message.success('已取消删除')
        })
    },
    // 点击页码切换另一页信息
    async changePage (newPage) {
      this.page.page = newPage // newPage是最新页码
      this.getArticlesList()
    },
    // 分页
    handleSizeChange (pagesize) {
      this.page.page = 1
      this.page.pagesize = pagesize
      this.getArticlesList()
    }
  }
}
</script>

<style scoped lang='less'>
.container {
  margin: 10px 10px 20px;
  background-color: #fff;
}
.preview-content {
  margin-top: 10px;
  padding: 10px;
  background-color: #f5f5f5;
  border-top: 1px dashed #ccc;
}
.editor {
  height: 200px;
}
.video {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.3);
  overflow: hidden;
  z-index: 9999;
  .video-ico {
    width: 50px;
    height: 50px;
    position: absolute;
    top: 30px;
    left: 50%;
    transform: translate(-50%, 0);
    background: rgba(0, 0, 0, 0.4);
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.4);
    border-radius: 50%;
    text-align: center;
    line-height: 50px;
    color: #fff;
    font-size: 20px;
  }
  .video-box {
    width: 800px;
    height: 600px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    video {
      width: 100%;
      height: 100%;
    }
  }
}
</style>
